<template>
  <div class="page-singin">
    <div class="top_banner">
      <img src="../../public/imgs/siginin/singin_bg.png" alt="">
      <div class="btn" v-show="!issingin" @click="Manualsigin()">
        立即签到
      </div>
      <div class="btn" v-show="issingin">
        签到成功
      </div>
      <div class="des">
        <div class="a_1">已连续签到 {{days}}天</div>
        <div class="a_2" v-if="tips==10">还差 {{getdiffDays(days)}}天可获抵价券1张！</div>
        <div class="a_2" v-if="tips==20">获取抵价券一张</div>
        <div class="a_2" v-if="tips==30">还差 {{getdiffDays(days)}}天可抽奖1次！</div>
        <div class="a_2" v-if="tips==40">获取1次抽奖机会</div>
        <div class="a_2" v-if="tips==50">还差 {{getdiffDays(days)}}天可抽奖2次！</div>
        <div class="a_2" v-if="tips==60">获取2次抽奖机会</div>
      </div>
      <div class="rule" @click="popupVisible=true">
        活动规则＞
      </div>
      <div class="recove" @click="jumprecove()">
        获奖记录
      </div>
    </div>

    <div class="canade">
      <calendar :events="calendar1.events" @select="select" @selectMonth="calendar1.selectMonth" @selectYear="calendar1.selectYear">
      </calendar>
    </div>

    <!-- 签到规则 -->
    <mt-popup v-model="popupVisible" popup-transition="popup-slide" id="pop_rules" :closeOnClickModal="false">
      <div class="title">
        签到规则
      </div>
      <div class="detail">
        1. 每日用户均可进入“每日签到”页面进行签到，当日未签到之后不可补签；<br/> 2. 连续签到达指定天数，即可获得相应奖励。如期间出现断签，则连续签到天数重新计算；<br/> 3. 因连续签到获得的抽奖机 会均需当日使用，如过期则视为自动放弃；<br/> 4. 最高连续签到天数15天，超过15天后，自第16日始，开启第2轮连续签到。
      </div>
      <img src="../../public/imgs/icon-close.png" alt="" class="close" @click="popupVisible=false">
    </mt-popup>
    <!-- 第一天 -->
    <mt-popup v-model="popupVisible1" popup-transition="popup-slide" class="tosk_1" :closeOnClickModal="false">
      <img src="../../public/imgs/siginin/task_gift.png" alt="" class="gift">
      <div class="title">签到成功</div>
      <div class="des" v-if="tips==10">还差
        <span> {{getdiffDays(days)}}</span>天可获抵价券1张！</div>
      <div class="des" v-if="tips==30">还差
        <span> {{getdiffDays(days)}}</span>天可抽奖1次！</div>
      <div class="des" v-if="tips==50">还差
        <span> {{getdiffDays(days)}}</span>天可抽奖2次！</div>
      <div class="btn" @click="popupVisible1=false">确定</div>
    </mt-popup>
    <!-- 第三天获取抵价券 -->
    <mt-popup v-model="popupVisible2" popup-transition="popup-slide" class="tosk_1" :closeOnClickModal="false">
      <div class="card_bg">
        <div class="c_1" v-show="awardType==70">3
          <span>元</span>
        </div>
        <div class="c_1" v-show="awardType==80">5
          <span>元</span>
        </div>
        <div class="c_2">抵价券</div>
      </div>
      <div class="title" v-show="awardType==70">恭喜你获得3元抵价券 1 张</div>
      <div class="title" v-show="awardType==80">恭喜你获得5元抵价券 1 张</div>
      <div class="des">您还差
        <span>{{getdiffDays(days)}}</span>天可抽奖1次！ </div>
      <div class="btn" @click="popupVisible2=false">确定</div>
    </mt-popup>
    <!-- 抽奖弹窗 -->
    <mt-popup v-model="popupVisible3" popup-transition="popup-slide" class="tosk_2" :closeOnClickModal="false">
      <div class="title">
        签到成功
      </div>
      <div class="des" v-if="tips==40">已连续签到7天，获得抽奖机会1次</div>
      <div class="des" v-if="tips==60">已连续签到15天，获得抽奖机会1次</div>
      <div class="card_content" v-show="!result">
        <div class="item" v-for="(item,index) in cardlist" @click="selset(index)" :id="'a'+index">
          <img src="../../public/imgs/siginin/card_default.png" alt="" class="defaultimg a1">
          <img src="../../public/imgs/siginin/select.png" alt="" class="defaultimg a2" style="display:none">
          <div class="item_sss">
            <div class="s_1">
              <span>{{(item.money)}}</span>{{item.uiti}}
            </div>
            <div class="s_3">{{item.name}}</div>
          </div>
        </div>
        <div class="btn" @click="shuffle()" v-if="!conformsubmit">开始翻牌</div>
        <div class="btn" @click="shufflesubmit()" v-if="conformsubmit">确认翻牌</div>
      </div>
      <div v-show="result">
        <div class="select_reulut">
          <div class="item " v-for="item in selsetcrad">
            <span class="result_1">{{item.money}}
              <span>{{item.uiti}}</span>
            </span>
            <span class="result_2">{{item.name}}</span>
            <span class="result_3">满3600可用<br/>期限≥60天</span>
          </div>

        </div>
        <div class="task">
          温馨提示<br/> 现金券有效期为7天，请尽快使用
        </div>
        <div class="task_btn">立即使用</div>
      </div>

    </mt-popup>
  </div>

</template>

<script>
import calendar from "components/calendar.vue";
import moment from "moment";
import { Popup, Toast } from "mint-ui";
export default {
  components: {
    calendar
  },
  data() {
    return {
      days: 0, //连续签到日期
      diffDays: 0, //领奖相差几天
      tips: 10, //弹框状态
      awardType: 70, //抵价券类型
      isLogin: false,
      popupVisible: false,
      result: false, //翻牌后的结果
      sessionid: "",
      popupVisible1: false, //第一天
      popupVisible2: false, //获取抵价券
      popupVisible3: false, //抽奖弹窗
      Toastlist: [],
      lock: false,
      issingin: false,
      conformsubmit: false,
      cont: 2,
      cardlist: [
        { money: "0.2", select: false, name: "加息券", uiti: "%" },
        { money: "0.3", select: false, name: "加息券", uiti: "%" },
        { money: "0.5", select: false, name: "加息券", uiti: "%" },
        { money: "5", select: false, name: "抵价券", uiti: "元" },
        { money: "10", select: false, name: "抵价券", uiti: "元" },
        { money: "60", select: false, name: "抵价券", uiti: "元" }
      ],
      returnCarlist: {
        card1: 30,
        card2: 20,
        card3: 10,
        card4: 40,
        card5: 50,
        card6: 60
      },
      selsetcrad: [],
      selectindexarr: [],
      animatenum: 0,
      calendar1: {
        events: {},
        selectMonth(month, year) {},
        selectYear(year) {},
        timestamp: Date.now()
      }
    };
  },
  methods: {
    jumprecove() {
       var data = {
        link:  `${this.Interface.getH5}singinwinning.html`,
         adName:"签到获奖记录",
          isShare:false,
      };
      this.Uitis.Jump(data)
    },
    getdiffDays(day) {
      if (day > 15) {
        day = day % 15;
      }
      if (day >= 0 && day <= 2) {
        return 3 - day;
      } else if (day >= 3 && day <= 7) {
        return 7 - day;
      } else if (day >= 8 && day <= 15) {
        return 15 - day;
      }
    },
    getsiginlist() {
      this.$http
        .get(this.Interface.getsiginlist, {
          params: { sessionid: this.sessionid }
        })
        .then(res => {
          if (res.data.success) {
            res.data.data.signInDateList.forEach(element => {
              let today = moment().format("YYYY-M-D");
              if (moment(element.signInDate).format("YYYY-M-D") == today) {
                this.$set(this.calendar1.events, today, "today");
              } else {
                this.$set(
                  this.calendar1.events,
                  moment(element.signInDate).format("YYYY-M-D"),
                  "singin"
                );
              }
            });
            res.data.data.awardDateList.forEach(item => {
              let today = moment().format("YYYY-M-D");
              if (
                item.days !== null &&
                item.diffDays !== null &&
                item.tips !== null
              ) {
                this.days = item.days;
                this.diffDays = item.diffDays;
                this.tips = item.tips;
                this.getdiffDays();
              }
              this.Toastlist.push(item);
              if (moment(item.signInDate).format("YYYY-M-D") !== today) {
                this.$set(
                  this.calendar1.events,
                  moment(item.signInDate).format("YYYY-M-D"),
                  "gift"
                );
              }
            });
          }
        });
    },
    Manualsigin() {
      if (this.isLogin) {
        this.sigin();
      } else {
        this.Uitis.JumpNavite("jumpToLogin");
      }
    },
    //签到
    test() {
      this.tips = 10;
      this.days = 16;
      if (this.tips == 10 || this.tips == 30 || this.tips == 50) {
        this.popupVisible1 = true;
      } else if (this.tips == 20) {
        this.popupVisible2 = true;
      } else if (this.tips == 40 || this.tips == 60) {
        this.popupVisible3 = true;
      }
      this.getdiffDays();
    },
    sigin() {
      this.$http
        .post(this.Interface.getsigin, { sessionid: this.sessionid })
        .then(res => {
          if (res.data.success) {
            this.days = res.data.data.days;
            this.diffDays = res.data.data.diffDays;
            this.tips == res.data.data.tips;
            this.awardType = res.data.data.awardType;
            this.issingin = true;
            let today = moment().format("YYYY-M-D");
            this.$set(this.calendar1.events, today, "today");
            if (this.tips == 10 || this.tips == 30 || this.tips == 50) {
              this.popupVisible1 = true;
            } else if (this.tips == 20) {
              this.popupVisible2 = true;
            } else if (this.tips == 40 || this.tips == 60) {
              this.popupVisible3 = true;
            }
            this.getdiffDays();
          } else if (res.data.data.error_code == "700012") {
            this.issingin = true;
          }
        });
    },
    select(value) {
      if (value[3] == "gift") {
        var time = value[0] + "-" + parseInt(value[1]+value[4]) + "-" + value[2];
        this.Toastlist.forEach(item => {
          if (time == moment(item.signInDate).format("YYYY-M-D")) {
            Toast({
              message: item.awardDesc,
              position: "center",
              duration: 2000
            });
          }
        });
      }
    },
    godefaule() {
      $(".card_content .item").each(function(index, item) {
        setTimeout(function() {
          $(item).addClass("ani" + index);
        }, index * 300);
        // 发牌
      });
      setTimeout(() => {
        this.lock = true;
      }, 2500);
    },
    onceshuffle(index, item) {
      var z = index / 4 * 10;
      var delay = index * 10;
      var offsetX = this.plusMinus(Math.random() * 60 + 30);
      $(item).css({
        transition: "all .2s cubic-bezier(0.645, 0.045, 0.355, 1.000)",
        transitionDelay: index / 10 + "s"
      });

      setTimeout(function() {
        let a = `translate3d(${offsetX}%, ${z}px,0) rotateY(180deg)`;
        $(item).css({ transform: a });
      }, 0);
      setTimeout(function() {
        $(item).css({ transform: `translate(${0}px,${0}px)  rotateY(180deg)` });
        setTimeout(function() {
          $(item).css({ transition: "" });
        }, 200);
      }, 200 + delay);
    },
    shufflesubmit() {
      let _that = this;
      this.$http
        .post(this.Interface.getSigninConfirm, { sessionid: this.sessionid })
        .then(res => {
          if (res.data.success && res.data.data.error_code == "000000") {
            if (this.tips == 60) {
              $(".card_content .item").css({ display: "none" });
              $(".card_content .item")
                .eq(this.selectindexarr[0])
                .css({ display: "block", transform: "rotateY(0) " });
              $(".card_content .item")
                .eq(this.selectindexarr[1])
                .css({ display: "block", transform: "rotateY(0)" });
            } else if (this.tips == 40) {
              $(".card_content .item").css({ display: "none" });
              $(".card_content .item")
                .eq(this.selectindexarr[0])
                .css({ display: "block", transform: "rotateY(0) " });
            }
            setTimeout(function() {
              _that.result = true;
            }, 1000);
            $(".select_reulut").css({ transform: "scale(0)" });
            setTimeout(function() {
              $(".select_reulut").css({ transform: "scale(1)" });
            }, 1500);
          }
        });
    },
    shuffle(index, item) {
      let i = 0;
      var _that = this;
      let e = document.getElementById("a5");
      var transitionEvent = this.whichTransitionEvent();
      transitionEvent &&
        e.addEventListener(transitionEvent, function(event) {
          i++;
          if (i == 3) {
            $(".card_content .item").each(function(index, item) {
              _that.onceshuffle(index, item);
            });
          } else if (i == 4) {
            _that.godefaule();
          }
        });
      $(".card_content .item").each(function(index, item) {
        $(item).addClass("active");
        setTimeout(function() {
          setTimeout(function() {
            $(item).css({ top: "3.73333rem", left: "3.06667rem" });
          }, index * 300);
        }, 1000);
        //执行洗牌
      });
    },
    getcardList() {
      this.$http
        .get(this.Interface.getapp_signin_lucky_draw, {
          params: { sessionid: this.sessionid }
        })
        .then(res => {
          if (res.data.success) {
            this.returnCarlist = res.data.data;
          }
        });
    },
    selset(index) {
      if (this.lock) {
        let selectindex;
        if (this.cardlist[index].select == true) {
          return false;
        }
        if (this.tips == 40 && this.selsetcrad.length < 1) {
          selectindex = this.returnCarlist.card1 / 10 - 1;
          if (selectindex !== index) {
            let copy = this.cardlist[index];
            this.$set(this.cardlist, index, this.cardlist[selectindex]);
            this.$set(this.cardlist, selectindex, copy);
          }

          this.selsetcrad.push(this.cardlist[index]);

          this.lock = false;
        } else if (this.tips == 60 && this.selsetcrad.length < 2) {
          if (this.selsetcrad.length == 0) {
            selectindex = this.returnCarlist.card1 / 10 - 1;
          } else if (this.selsetcrad.length == 1) {
            selectindex = this.returnCarlist.card2 / 10 - 1;
          }
          if (selectindex !== index) {
            let copy = this.cardlist[index];
            this.$set(this.cardlist, index, this.cardlist[selectindex]);
            this.$set(this.cardlist, selectindex, copy);
          }
          this.selsetcrad.push(this.cardlist[index]);
        }
        $("#a" + index)
          .find(".a1")
          .css("display", "none");
        $("#a" + index)
          .find(".a2")
          .css("display", "block");
        this.selectindexarr.push(index);
        if (this.tips == 40 && this.selsetcrad.length == 1) {
          this.conformsubmit = true;
        } else if (this.tips == 60 && this.selsetcrad.length == 2) {
          this.conformsubmit = true;
          this.lock = false;
        }
      }

      // if (this.cont > 0) {
      //   if (this.cardlist[index].select == true) {
      //     return false;
      //   }
      //   if (this.lock) {
      //     this.lock = false;
      //     let res = {
      //       data: {
      //         data: {
      //           money: "30",
      //           quota: "1000"
      //         }
      //       }
      //     };

      //     if (res.data.data.money == this.cardlist[index].money) {
      //       this.cardlist[index].money = res.data.data.money;
      //       this.cardlist[index].quota = res.data.data.quota;
      //       this.cardlist[index].select = true;
      //       $("#a" + index).removeClass("active");
      //       var oc = {};
      //       oc.money = res.data.data.money;
      //       oc.quota = res.data.data.quota;
      //       this.selsetcrad.push(oc);
      //     } else {
      //       for (let i = 0; i < this.cardlist.length; i++) {
      //         if (this.cardlist[i].money == res.data.data.money) {
      //           var arr = this.cardlist[index];
      //           this.cardlist[index] = this.cardlist[i];
      //           this.cardlist[i] = arr;
      //         }
      //       }
      //       this.cardlist[index].money = res.data.data.money;
      //       this.cardlist[index].quota = res.data.data.quota;
      //       this.cardlist[index].select = true;
      //       $("#a" + index).removeClass("active");
      //       var oc = {};
      //       oc.money = res.data.data.money;
      //       oc.quota = res.data.data.quota;
      //       this.selsetcrad.push(oc);
      //     }

      //     this.cont--;
      //     this.lock = true;
      //     if (this.cont <= 0) {
      //       this.lock = false;
      //       setTimeout(() => {
      //         for (var i = 0; i < this.cardlist.length; i++) {
      //           $(".card_content .item").removeClass("active");
      //         }
      //       }, 1000);
      //       setTimeout(() => {
      //         // this.popupVisible = true;
      //       }, 2000);
      //     }
      //   }
      // }
    },
    //洗牌核心特效
    plusMinus(value) {
      var plusminus = Math.round(Math.random()) ? -1 : 1;

      return plusminus * value;
    },

    whichTransitionEvent() {
      var t;
      var el = document.createElement("fakeelement");
      var transitions = {
        transition: "transitionend",
        OTransition: "oTransitionEnd",
        MozTransition: "transitionend",
        WebkitTransition: "webkitTransitionEnd"
      };
      for (t in transitions) {
        if (el.style[t] !== undefined) {
          return transitions[t];
        }
      }
    }
  },
  created() {
    this.$nextTick(() => {
      $(".card_content .item").each(function(index, item) {
        if (index == 0) {
          $(item).css({ top: "0", left: "0.4rem" });
        } else if (index == 1) {
          $(item).css({ top: "0", left: "3.066667rem" });
        } else if (index == 2) {
          $(item).css({ top: "0", left: "5.733333rem" });
        } else if (index == 3) {
          $(item).css({ top: "3.733333rem ", left: "0.4rem" });
        } else if (index == 4) {
          $(item).css({ top: "3.733333rem ", left: "3.066667rem" });
        } else if (index == 5) {
          $(item).css({ top: "3.733333rem ", left: "5.733333rem" });
        }
      });
    });

    this.Uitis.getInfo().then(res => {
      if (res.uId == "") {
        this.isLogin = false;
      } else {
        this.sessionid = res.sessionid;
        this.isLogin = true;
        this.sigin();
        this.getsiginlist();
        this.getcardList();
      }
    });
  }
};
</script>

<style lang="less">
body {
  background: #fff;
}
.page-singin {
  .test {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
  }
  .task {
    text-align: center;
    font-size: 24px;
    color: #e2c792;
    line-height: 45px;
    margin-top: 30px;
  }
  .task_btn {
    border-radius: 4px;
    background-image: linear-gradient(
      0deg,
      rgb(255, 171, 89) 0%,
      rgb(254, 227, 172) 100%
    );
    margin: 0 auto;
    margin-top: 50px;
    box-shadow: 2.819px 1.026px 10px 0px rgba(0, 0, 0, 0.25);
    width: 430px;
    height: 72px;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    color: #d6022c;
  }
  .select_reulut {
    transition: all 2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 40px;
    .item {
      width: 252px;
      background: url(../../public/imgs/siginin/big_card_bg.png) no-repeat;
      height: 350px;
      background-size: contain;
      margin-left: 15px;
      margin-right: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 60px 0px;
      box-sizing: border-box;
      .result_1 {
        font-size: 76px;
        font-weight: bold;
        color: #cb2623;
        span {
          font-size: 42px;
          font-weight: 400;
        }
      }
      .result_2 {
        font-size: 28px;
        color: #da403e;
        margin-top: -30px;
      }
      .result_3 {
        font-size: 24px;
        color: #da403e;
      }
    }
  }
  #pop_rules {
    width: 590px;
    border-radius: 8px;
    padding: 50px 40px;
    box-sizing: border-box;
    .title {
      font-size: 32px;
      font-weight: 600;
      color: #5d3a14;
      text-align: center;
    }
    .detail {
      font-size: 26px;
      color: #845725;
      line-height: 40px;
      margin-top: 30px;
    }
    .close {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 68px;
      bottom: -140px;
    }
  }

  .tosk_1 {
    width: 630px;
    border-radius: 8px;
    background: #cb2623;
    box-sizing: border-box;
    padding: 70px 80px;
    text-align: center;
    .gift {
      width: 201px;
    }
    .title {
      font-size: 36px;
      color: #fff6e4;
      margin-top: 45px;
    }
    .des {
      font-size: 26px;
      color: #e2c792;
      margin-top: 30px;
      span {
        color: #fff6e4;
      }
    }
    .btn {
      border-radius: 4px;
      background-image: linear-gradient(
        0deg,
        rgb(255, 171, 89) 0%,
        rgb(254, 227, 172) 100%
      );
      margin: 0 auto;
      margin-top: 50px;
      box-shadow: 2.819px 1.026px 10px 0px rgba(0, 0, 0, 0.25);
      width: 430px;
      height: 72px;
      line-height: normal;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
      color: #d6022c;
    }
    .card_bg {
      width: 249px;
      height: 298px;
      margin: 0 auto;
      background: url(../../public/imgs/siginin/task_2_bg.png);
      background-size: cover;
      font-size: 22px;
      text-align: center;
      color: #fff;
      .c_1 {
        font-weight: bold;
        font-size: 70px;
        span {
          font-size: 29px;
        }
        padding-top: 70px;
        padding-bottom: 35px;
      }
    }
  }
  .tosk_2 {
    background: #cb2623;
    box-sizing: border-box;
    width: 630px;
    text-align: center;
    height: 920px;
    border-radius: 10px;
    .result_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .title {
      font-size: 32px;
      color: #fff1d7;
      margin-top: 60px;
    }
    .des {
      font-size: 24px;
      color: #e2c792;
      padding: 30px 0px;
    }
    .btn {
      border-radius: 4px;
      background-image: linear-gradient(
        0deg,
        rgb(255, 171, 89) 0%,
        rgb(254, 227, 172) 100%
      );
      margin: 0 auto;
      box-shadow: 2.819px 1.026px 10px 0px rgba(0, 0, 0, 0.25);
      width: 340px;
      height: 72px;
      line-height: normal;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
      color: #d6022c;
      margin-top: 600px;
    }
    .card_content {
      display: flex;
      width: 670px;
      box-sizing: border-box;
      margin: 0 auto;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      text-align: center;
      position: relative;
      .item {
        width: 176px;
        height: 257px;
        background-size: contain;
        border-radius: 10px;
        position: relative;
        margin-bottom: 25px;
        position: relative;
        transition: 1s;
        transform-style: preserve-3d;
        position: absolute;
        transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        img {
          border-radius: 10px;
          position: relative;
          top: 0px;
          left: 0px;
          width: 176px;
          height: 257px;
          box-shadow: 8.192px 5.736px 20px 0px rgba(0, 0, 0, 0.2);
          backface-visibility: hidden;
          transform: rotateY(180deg);
        }
        .item_sss {
          background: url(../../public/imgs/siginin/card_bg.png) no-repeat;
          background-size: contain;
          border-radius: 10px;
          top: 0px;
          left: 0px;
          width: 176px;
          height: 257px;
          box-shadow: 8.192px 5.736px 20px 0px rgba(0, 0, 0, 0.2);
          backface-visibility: hidden;
          position: absolute;
          -webkit-backface-visibility: hidden;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
      .s_1 {
        color: #ff6b5c;
        font-size: 30px;
        margin-top: 50px;
        font-family: "DinPro";
        span {
          font-size: 44px;
        }
      }
      .s_2 {
        font-size: 28px;
        color: #ff6b5c;
        margin-top: 50px;
        font-family: "DinPro";
      }
      .s_3 {
        font-size: 28px;
        color: #da403e;
        margin-bottom: 60px;
      }
    }
  }
  .ani0 {
    left: 30px !important;
    top: 0px !important;
  }
  .ani1 {
    left: 230px !important;
    top: 0px !important;
  }
  .ani2 {
    left: 430px !important;
    top: 0px !important;
  }
  .ani3 {
    left: 30px !important;
    top: 280px !important;
  }
  .ani4 {
    left: 230px !important;
    top: 280px !important;
  }
  .ani5 {
    left: 430px !important;
    top: 280px !important;
  }
  .recode {
    left: 200px;
    top: 330px;
  }
  .top_banner {
    position: relative;
    .btn {
      border-radius: 4px;
      background-image: linear-gradient(
        0deg,
        rgb(255, 171, 89) 0%,
        rgb(254, 227, 172) 100%
      );
      box-shadow: 2.819px 1.026px 10px 0px rgba(0, 0, 0, 0.25);
      position: absolute;
      width: 240px;
      height: 72px;
      left: 50%;
      transform: translateX(-50%);
      top: 150px;
      line-height: normal;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
      color: #d6022c;
    }
    .des {
      position: absolute;
      width: 100%;
      text-align: center;
      top: 250px;
      color: #fff;
      .a_1 {
        font-size: 26px;
      }
      .a_2 {
        font-size: 30px;
        margin-top: 20px;
      }
    }
    .rule {
      position: absolute;
      font-size: 24px;
      color: #fff0b9;
      right: 30px;
      top: 30px;
    }
    .recove {
      width: 20px;
      background: #ffe09e;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 80px;
      right: 0px;
      color: #5d3a14;
      font-size: 24px;
      padding: 15px;
      font-weight: 400;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }

  .active {
    transform: rotateY(180deg);
  }
  .pouple {
    width: 600px;
    left: 75px;
    position: fixed;
    top: 50%;
    margin-top: -450px !important;
    z-index: 20001;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 60px 70px;
    text-align: center;
    .title {
      font-size: 40px;
      color: #333;
      font-weight: bold;
    }
    .btn {
      width: 440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ff405e;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      border-radius: 10px;
      line-height: inherit;
      height: 80px;
    }
    .content {
      padding: 45px 0px 65px 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      .item_sss {
        background: url(../../public/imgs/buysuccess/card_alert.png) no-repeat;
        background-size: contain;
        height: 300px;
        width: 200px;
        box-shadow: 8.192px 5.736px 20px 0px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        .s_1 {
          color: #ff6b5c;
          font-size: 48px;
          margin-top: 50px;
          font-family: "DinPro";
          span {
            font-size: 34px;
          }
        }
        .s_2 {
          font-size: 28px;
          color: #ff6b5c;
          margin-top: 30px;
          font-family: "DinPro";
        }
        .s_3 {
          font-size: 18px;
          color: #ff6b5c;
          margin-top: 30px;
        }
      }
      .item_sss:first-child {
        margin-right: 30px;
      }
    }
  }
}
.canade {
  position: absolute;
  width: 630px;
  top: 360px;
  left: 50%;
  transform: translateX(-50%);
  .calendar-tools {
    margin-bottom: 30px;
  }
  .singin {
    color: #ef716e;
  }
}
</style>
